<template>
  <div id="index">
    <el-input
      class="edge"
      style="width:180px"
      size="mini"
      placeholder="会员账号"
      prefix-icon="el-icon-search"
      v-model="keyword"
    ></el-input>

    <el-select
      class="edge"
      style="width:180px"
      clearable
      size="mini"
      v-model="updatechoose"
      placeholder="状态"
    >
      <el-option
        @click.native="statustype(item.code)"
        v-for="item in update"
        :key="item.value"
        :label="item.value"
        :value="item.code"
      ></el-option>
    </el-select>
    <!-- 上级账号 -->
    <el-select
      class="edge"
      style="width:180px"
      clearable
      size="mini"
      v-model="choose"
      placeholder="上级账号"
    >
      <el-option v-for="item in module" :key="item.value" :label="item.value" :value="item.code"></el-option>
    </el-select>

    <!-- 时间 -->
    <el-date-picker
      class="edge"
      style="width:180px"
      size="mini"
      value-format="yyyy-MM-dd"
      format="yyyy-MM-dd"
      v-model="startTime"
      type="date"
      placeholder="开始时间"
    ></el-date-picker>
    <span>至</span>
    <el-date-picker
      class="edge"
      style="width:180px"
      size="mini"
      value-format="yyyy-MM-dd"
      format="yyyy-MM-dd"
      v-model="endTime"
      type="date"
      placeholder="结束时间"
    ></el-date-picker>

    <!-- 确定 -->
    <el-button @click="member()" style="margin-left:10px" size="mini" type="primary">确认</el-button>
    <el-button style="margin-left:10px" size="mini">重置</el-button>

    <!-- 列表 -->
    <div>
      <!-- 列表 -->
      <el-table border size="mini" :data="tableData" style="width: 100%;margin-top:20px" :header-cell-style="{background:'#ccc'}">
        <el-table-column prop="statusName" label="状态" width="80"></el-table-column>
        <el-table-column prop="account" label="会员账号" width="100"></el-table-column>
        <el-table-column prop="nickname" label="代号"></el-table-column>
        <el-table-column prop="balance" label="剩余额度"></el-table-column>
        <el-table-column prop="parentAccount" label="上级账号"></el-table-column>
        <el-table-column prop="updateTime" label="创建时间"></el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button @click="end(scope.row)" size="mini" type="primary">详情</el-button>
            <!-- <el-button @click="book" size="mini">账本</el-button>
            <el-button @click="diary" size="mini">日记</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div>
        <el-pagination
          size="mini"
          class="pageNumage"
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 详情弹框-->
    <el-dialog title="基本信息" :visible.sync="details" width="500px" :before-close="cancel">
      <!-- 组织 -->
       <div class="basic">
           <div>所属组织：</div>
           <div>{{JSONdate.organization}}</div>
       </div>
        <div class="basic">
           <div>占成：</div>
           <div>{{JSONdate.ratio}}</div>
       </div>
        <div class="basic">
           <div>账号：</div>
           <div>{{JSONdate.account}}</div>
       </div>
        <div class="basic">
           <div>代号：</div>
           <div>{{JSONdate.nickname}}</div>
       </div>
        <div class="basic">
           <div>剩余额度：</div>
           <div>{{JSONdate.balance}}</div>
       </div>
      <!-- 确定 -->
      <div class="elbutton">
        <el-button @click="cancel" size="mini" type="primary">确认</el-button>
      </div>
    </el-dialog>

    <!-- 弹框账本 -->

    <el-dialog title="账本" :visible.sync="books" width="500px" :before-close="cancel">
      <div class="bill">
        <div>会员：A10000</div>
        <!-- 类型 -->
        <el-select
          class="edge"
          style="width:180px"
          clearable
          size="mini"
          v-model="choosetype"
          placeholder="上级账号"
        >
          <el-option
            v-for="item in Traveler"
            :key="item.value"
            :label="item.value"
            :value="item.code"
          ></el-option>
        </el-select>
      </div>

      <!-- 表格 -->
      <div>
        <el-table size="mini" border :data="bounced" style="width: 100%;margin-top:20px">
          <el-table-column prop="date" label="类型"></el-table-column>
          <el-table-column prop="name" label="金额"></el-table-column>
          <el-table-column prop="address" label="余额"></el-table-column>
          <el-table-column prop="address" label="操作账号"></el-table-column>
          <el-table-column prop="address" label="操作时间"></el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div style="margin-top:20px">
        <el-pagination
          style="display: inline-block;
             float: right;margin-top:20px"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="100"
          layout="prev, pager, next"
          :total="1000"
        ></el-pagination>
      </div>
      <!-- 确定 -->
      <div class="elbutton">
        <el-button @click="cancel" size="mini" type="primary">确认</el-button>
      </div>
    </el-dialog>

    <!-- 日记弹框-->
    <el-dialog title="日记" :visible.sync="Diary" width="500px" :before-close="cancel">
      <el-radio-group class="tabs" size="mini" v-model="tabPosition" style="margin-bottom: 30px;">
        <el-radio-button @click.native="typeIndex=1" label="top">登入日记</el-radio-button>
        <el-radio-button @click.native="typeIndex=2" label="right">操作日记</el-radio-button>
      </el-radio-group>

      <!-- 登入日记 -->
      <div v-if="typeIndex == 1 ? true : false">
        <div class="bill">
          <div>会员：A10000</div>
          <!-- 类型 -->
          <el-select
            class="edge"
            style="width:180px"
            clearable
            size="mini"
            v-model="choosetype"
            placeholder="上级账号"
          >
            <el-option
              v-for="item in Traveler"
              :key="item.value"
              :label="item.value"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>

        <!-- 列表 -->
        <div>
          <el-table size="mini" border :data="ownership" style="width: 100%;margin-top:20px">
            <el-table-column prop="date" label="IP地址"></el-table-column>
            <el-table-column prop="name" label="IP归属"></el-table-column>
            <el-table-column prop="address" label="登入时间"></el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div style="margin-top:20px">
          <el-pagination
            style="display: inline-block;
             float: right;margin-top:20px"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="100"
            layout="prev, pager, next"
            :total="1000"
          ></el-pagination>
        </div>
      </div>
      <!-- 操作日记 -->
      <div v-if="typeIndex == 2 ? true : false">
        <div class="bill">
          <div>会员：A10000</div>
          <!-- 类型 -->
          <el-select
            class="edge"
            style="width:180px"
            clearable
            size="mini"
            v-model="choosetype"
            placeholder="上级账号"
          >
            <el-option
              v-for="item in Traveler"
              :key="item.value"
              :label="item.value"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>

        <!-- 列表 -->
        <div>
          <el-table size="mini" border :data="Operating" style="width: 100%;margin-top:20px">
            <el-table-column prop="date" label="操作类型"></el-table-column>
            <el-table-column prop="name" label="操作账号"></el-table-column>
            <el-table-column prop="address" label="操作内容"></el-table-column>
            <el-table-column prop="address" label="操作时间"></el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div style="margin-top:20px">
          <el-pagination
            style="display: inline-block;
             float: right;margin-top:20px"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="100"
            layout="prev, pager, next"
            :total="1000"
          ></el-pagination>
        </div>
      </div>
      <!-- 确定 -->
      <div class="elbutton">
        <el-button @click="cancel" size="mini" type="primary">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getList } from "@/api/table";
import { status, memberlist, detail } from "@/api/user";
import qs from "qs";
export default {
  name: "index",
  data() {
    return {
      pageNum: 1,
      total: 0,
      typecode: 1, //取状态
      updatechoose: "启动",
      update: [], //状态
      choose: "",
      module: [],
      startTime: "",
      endTime: "",
      keyword: "",
      tableData: [],
      details: false, //详情弹框
      books: false, //日记弹框
      choosetype: "", //类型
      Traveler: [],
      bounced: [], //日记弹框表格
      currentPage: 1,
      Diary: false, //日记弹框
      typeIndex: 1,
      tabPosition: "top",
      ownership: [], //日记列表
      Operating: [], //操作日记列表
      detailId: "",
      id: "",
      JSONdate:[],//详情
    };
  },
  created() {
    this.fetchData();
    this.member(this.typecode);
  },
  methods: {
    // 状态点击
    statustype(num) {
      let that = this;
      that.typecode = num;
      console.log(that.typecode, 7777);
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.member();
    },
    // 详情
    end(row) {
      this.id = row.id;
      console.log(this.id, "什么");
      let data = qs.stringify({
        id: this.id
      });
      detail(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          this.details = true;
          this.JSONdate = res.data.data
        } else {
          this.$message.error(res.data.msg);
        }
        console.log(this.id);
      });
    },
    // 账本
    book() {
      this.books = true;
    },
    // 日记
    diary() {
      this.Diary = true;
    },
    // 状态接口数据
    fetchData() {
      let data = qs.stringify({});
      status(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          this.update = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 会员列表接口
    member() {
      let that = this;
      let data = qs.stringify({
        keyword: that.keyword,
        status: that.typecode,
        parentId: "",
        startTime: that.startTime,
        endTime: that.endTime,
        pageNum: that.pageNum,
        pageSize: 10
      });
      memberlist(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          that.tableData = res.data.data;
          that.total = res.data.count;
        } else {
          that.$message.error(res.data.msg);
        }
      });
    },

    //   关闭
    cancel() {
      this.details = false;
      this.books = false;
      this.Diary = false;
      this.$message({
        type: "info",
        message: "已关闭"
      });
    }
  }
};
</script>
<style lang="less" scoped>
#index {
  margin-top: 20px;
  margin-left: 20px;
}
// 账本
.bill {
  display: flex;
  justify-content: space-between;
}
// 分页
.pageNumage {
  float: right;
  margin-top: 20px;
}
.basic{
  display: flex;
  margin-top: 20px;
}
.elbutton{
  display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px
}
</style>